<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网banner</title>
</head>
<style>
  body {
    margin: 0;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .banner {
    width: 1226px;
    height: 460px;
    margin: 50px auto 0;
    position: relative;
    overflow: hidden;
    /* overflow-x: scroll; */
  }
  .banner ul {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
  }
  .banner ul li img {
    width: 1226px;
    height: 460px;
  }
  .button-prev, .button-next {
    width: 41px;
    height: 69px;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    background-image: url(//i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png);
  }
  .button-prev {
    background-position: -84px 50%;
    left: 0;
  }
  .button-prev:hover {
    background-position: 0px 50%;
  }
  .button-next {
    background-position: -125px 50%;
    right: 0;
  }
  .button-next:hover {
    background-position:  -43px 50%;
  }
  .button {
    position: absolute;
    width: 1226px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    font-size: 0;
    text-align: center;
  }
  .button span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    vertical-align: middle;
  }
  .button .active {
    background-color: hotpink;
  }
</style>
<body>
  <div class="banner">
    <ul>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a3729c82b1ec2bdbb641c30564c5bed1.jpg" alt="">
      </li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c0a961647a4ffb29372a8395893de97.png" alt="">
      </li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c162874708ca7856f972ef5eee976e3a.jpg" alt="">
      </li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/212e321c7a8a858e7a458a756ab6122f.jpg" alt="">
      </li>
      <li>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d507a3851facf18b1ee54ee94c9e8e8.jpg" alt="">
      </li>
    </ul>
    <div class="button-prev"></div>
    <div class="button-next"></div>
    <div class="button">
      <span class="active"></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
</html>